<template>
  <div class="index">
    <commonHeader></commonHeader>

    <swiper v-if="ListBanner.length" :options="swiperOption" class="swiper-container swiper-container1 wow fadeInUp"
      ref="mySwiper">
      <swiper-slide class="swiper-item" v-for="item of ListBanner" :key="item.id">
        <img class="swiper-img" :src="item.banner" alt="" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" v-if="ListBanner.length > 1"></div>
    </swiper>
    <!-- <div class="banner" v-if="ListBanner.length == 1">
      <img class="banner-img" :src="ListBanner[0].banner" alt="">
    </div> -->
    <div class="about wow fadeInUp">
      <div class="about-con">
        <div class="text">
          <div class="tit">关于惠元</div>
          <div class="introduct" v-html="Content0.subclassname"></div>
          <div class="article" v-html="Content0.content"></div>
        </div>
        <div class="img-wrap">
          <img class="img" :src="Content0.picture" alt="" />
          <div class="site">*惠元医院大楼外景</div>
        </div>
      </div>
    </div>
    <div class="felicity wow fadeInUp">
      <div class="img-wrap">
        <img class="img" :src="Content1.picture" alt="" />
      </div>
      <div class="text">
        <div class="tit">幸福女性 和谐中国</div>
        <div class="introduct" v-if="Content1.subclassname" v-html="Content1.subclassname.replace(/\n/g, '<br/>')">
        </div>
        <div class="article" v-html="Content1.content"></div>
        <div class="three-icon">
          <div class="item">
            <img class="icon" src="~@/assets/img/felicity-icon1.png" alt="" />
            <div class="texts">
              惠元使命 <br />
              幸福女性，和谐中国
            </div>
          </div>
          <div class="item">
            <img class="icon" src="~@/assets/img/felicity-icon2.png" alt="" />
            <div class="texts">
              惠元定位 <br />
              女性私密大健康全球医疗中心
            </div>
          </div>
          <div class="item">
            <img class="icon" src="~@/assets/img/felicity-icon3.png" alt="" />
            <div class="texts">
              惠元愿景 <br />
              中国私密健康管理典范品牌
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="history wow fadeInUp">
      <div class="tit">品牌历程 载梦前行</div>
      <div class="swiper-wrap3">
        <div class="swipers bangxin">
          <swiper :options="swiperOption1" class="swiper-container swiper-container2" ref="mySwiper1"
            v-if="LisYouHiHuiyuan.length">
            <swiper-slide class="swiper-item" v-for="(item, index) of LisYouHiHuiyuan" :key="index">
              <img class="swiper-img" :src="item.banner" alt="" />
              <div class="text">
                <div class="text-tit">{{ item.bannersort }}</div>
                <div class="text-con" v-if="item.description" v-html="item.description.replace(/\n/g, '<br/>')"></div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </div>

      </div>
      <div class="time-wrap">
        <span :class="['time', { actives: active == index }]" @click="cutSwiper(index)"
          v-for="(item, index) of LisYouHiHuiyuan" :key="index">{{ item.bannersort }}</span>
      </div>
    </div>

    <commonFooter></commonFooter>
  </div>
</template>

<script lang="ts">
  // ajax
  import { Hello } from "@/assets/js/api";

  import { Component, Vue } from "vue-property-decorator";
  import commonHeader from "@/components/headers.vue";
  import commonFooter from "@/components/footer.vue";
  @Component({
    name: "hello",
    components: {
      commonHeader,
      commonFooter,
    },
  })
  export default class didi extends Vue {
    that = this;
    // 头部banner
    ListBanner = [];
    // 内容
    ListContent = [];
    Content0 = {
      content: "",
      picture: "",
    };
    Content1 = {
      content: "",
      picture: "",
    };

    // 品牌历程
    LisYouHiHuiyuan = [];
    active = 0;
    swiperOption = {
      // 参数选项,显示小点
      pagination: ".swiper-pagination",
      paginationClickable: true,
      //循环
      loop: true,
      // 用户操作swiper之后，是否禁止autoplay
      autoplayDisableOnInteraction: false,
      //滑动速度
      speed: 1000,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      // delay:1000
      // prevButton: ".swiper-button-prev",
      // nextButton: ".swiper-button-next",

      // onSlideChangeStart: function (swiper) {
      //   this.active = swiper.realIndex;
      // }
    };

    swiperOption1 = {
      // 参数选项,显示小点
      // pagination: ".swiper-pagination1",
      paginationClickable: true,
      //循环
      loop: true,
      //每张播放时长3秒，自动播放
      // autoplay: 2000,
      // 用户操作swiper之后，是否禁止autoplay
      autoplayDisableOnInteraction: false,
      //滑动速度
      speed: 1000,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // onSlideChangeStart: function (swiper) {
      //     that.active = swiper.realIndex;
      //     //   this.realIndex + 1
      //     console.log(swiper.realIndex);
      //   },


      on: {
        slideChangeTransitionStart: function () {
          console.log(this, "thisthisthis");
          console.log(Vue, "didididididi");
          didi.active = this.realIndex;
        }
      },

    };



    // computed: {
    //   swiper() {
    //     return this.$refs.mySwiper.swiper;
    //   },
    //   swiper1() {
    //     return this.$refs.mySwiper1.swiper;
    //   },
    // },

    get swiper(): any {
      console.log(this.$refs, "this.$refs.mySwiper1")
      return this.$refs.mySwiper.$swiper;
    }

    get swiper1(): any {
      console.log(this.$refs, "this.$refs.mySwiper1")
      return this.$refs.mySwiper1.$swiper;
    }



    cutSwiper(index: number) {
      this.active = index;
      this.swiper1.slideTo(index + 1, 1000, false);
    }


    mounted() {
      Hello().then((response: any) => {
        console.log(response.data, "Hello");
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner = data[0].ListBanner;

            data[0].ListContent.forEach((item) => {
              if (item.title == "关于惠元") {
                this.Content0 = item;
              }
              if (item.title == "惠元定义") {
                this.Content1 = item;
              }
            });
            this.LisYouHiHuiyuan = data[0].LisYouHiHuiyuan;

            this.$nextTick(() => {
              if (this.ListBanner.length <= 1) {
                this.swiper.autoplay.stop();
              }
              if (this.LisYouHiHuiyuan.length <= 1) {
                this.swiper1.autoplay.stop();
              }
            });
          }
        }
      });
    }
  }
</script>


<style lang="scss" scoped>
  @import "~@/assets/scss/hello.scss";
</style>